<template>
  <div class="page">
    <mt-header>
      <router-link slot="more" to="/forgot">
        <mt-button>忘记密码</mt-button>
      </router-link>
    </mt-header>
    <div class="pageBody">
      <div class="inputRow">
        <mt-field
          placeholder="手机号"
          type="tel"
          :attr="{ maxlength: 11 }"
          v-model="mobile"
        ></mt-field>
      </div>

      <div class="inputRow">
        <mt-field
          placeholder="密码"
          type="password"
          :attr="{ maxlength: 20 }"
          v-model="password"
        ></mt-field>
      </div>

      <mt-button type="primary" class="btnSubmit" @click="submit"
        >登录</mt-button
      >
      <router-link to="/regist">
        <mt-button type="primary" class="btnSubmit btnRegist"
          >通过手机号码注册</mt-button
        >
      </router-link>
      <div class="thirdLogin">
        <p>第三方登录</p>
        <div class="third">
          <div class="thirdBox" v-for="item in third" :key="item.thirdId">
            <router-link :to="'/third/' + item.thirdId"
              ><img :src="item.logo" alt=""
            /></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import MtHeader from "@/components/MtHeader.vue";
export default {
  components: { MtHeader },
  data() {
    return {
      mobile: "", //初始化手机号
      password: "", //初始化密码
      third: [
        {
          thirdId: 10000,
          logo: require("@/assets/images/login/WeChat.png"), //logo图片
        },
        {
          thirdId: 10001,
          logo: require("@/assets/images/login/WeiBo.png"), //logo图片
        },
        {
          thirdId: 10002,
          logo: require("@/assets/images/login/QQ.png"), //logo图片
        },
      ],
    };
  },
  watch: {
    //监听手机号码长度
    mobile(val, oval) {
      //console.log(val);
      //let reg = /^1(3,7,8)\d{10}$/
      if (val.length > 11) {
        this.mobile = oval;
      }
    },
    //监听密码长度
    password(val, oval) {
      if (val.length < 6) {
        console.log();
      } else if (val.length == 20) {
        this.password = oval;
      }
    },
  },
  methods: {
    //提交
    submit() {
      //1. 验证表单
      //2. 发送数据并响应
      let mobile = this.mobile;
      let password = this.password;
      if(mobile&&password){
        this.$toast({
          message: "操作成功",
          duration: 1000,
        });
        setTimeout(() => {
          this.$router.push("/recommend");
        }, 1000);
      }else{
        this.$toast({
          message: "请填写完信息",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  .pageBody {
    border-top: 1px solid Gainsboro;
    box-sizing: border-box;
    padding: 20px;
    background: white;
    height: calc(100% - 40px);
  }
}

.inputRow {
  border-bottom: 1px solid #eee;
  align-items: center;
  font-size: 1rem;
  display: flex;
  margin-bottom: 10px;
  ::v-deep input {
    caret-color: #26a2ff;
    min-width: 40px;
    height: 44px;
    flex: 1;
    border: none;
    background: none;
    line-height: 34px;
    padding: 0;
    outline: none;
    font-size: 1.2rem;
  }

  .btnGetCode {
    background: none;
    border: none;
    height: 40px;
    font-size: 1rem;
  }
}

.btnSubmit {
  width: calc(100%);
  margin-top: 10px;
}
.btnRegist {
  margin-top: 60px;
}

.thirdLogin {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
  margin-bottom: 10px;
}
.third {
  display: flex;
  justify-content: center;
  .thirdBox {
    margin: 0 10px;
    img {
      width: 50px;
      height: 50px;
      object-fit: cover;
    }
  }
}
</style>